<template>
  <u-cell :title="title" :style="{width: width}" >
    <template #value>
      <u-album :urls="urlList"/>
    </template>
  </u-cell>
</template>
<script>
export default {
  name: 'ImageGallery',
  props: {
    modelValue: {
      type: String,
      default: undefined
    },
    title: {
      type: String,
      default: '图片列表'
    },
    width: {
      type: String,
      default: '100%'
    }
  },
  data() {
    return {
      urlList: []
    }
  },
  watch: {
    modelValue: {
      immediate: true,
      handler(val) {
        this.urlList = []
        if (this.isNull(val)) {
          return
        }
        try {
          const list = JSON.parse(val)
          list.forEach(item => {
            this.urlList.push(item.url)
          })
        } catch {
          this.urlList = val.split(',')
        }
      }
    }
  }
}
</script>
<style scoped lang="scss">

</style>
